.total-number-box {
  text-align: center;

  .number-title {
    font-size: 18px;
    font-weight: 400;
    color: #FFFFFF90;
  }

  .number-item-box {
    justify-content: center;

    .number-item {
      font-family: 'Giorgio Sans';

      width: 29px;
      height: 35px;
      line-height: 35px;
      border-radius: 5px;
      font-size: 27px;
      text-align: center;
      font-weight: bold;
      // box-shadow: inset 0 0 10px #0b8aea;
      // background: rgba(255, 255, 255, 0.05);
      background: url('@/assets/screen/num_bg.png') no-repeat center center;
      background-size: cover;
    }
  }
}

.total-number-box--lg {
  .number-title {
    font-size: 28px;
    font-family: 'Source Han Sans CN';
    color: #FFFFFF;
  }

  .number-item-box {
    font-family: 'Giorgio Sans';

    .number-item {
      width: 29px;
      height: 35px;
      line-height: 35px;
      border-radius: 5px;
      font-size: 27px;
      text-align: center;

      font-weight: bold;
      color: #FEFEFE;
      // box-shadow: inset 0 0 10px #0b8aea;
      // background: rgba(255, 255, 255, 0.05);
      background: url('@/assets/screen/num_bg.png') no-repeat center center;
    }
  }
}

.total-number-box--sm {
  .number-title {
    font-size: 24px;
    font-family: 'Source Han Sans CN';
    color: #FFFFFF;
  }

  .number-item-box {
    font-family: 'Giorgio Sans';

    .number-item {
      width: 29px;
      height: 35px;
      line-height: 35px;
      border-radius: 5px;
      font-size: 27px;
      text-align: center;

      font-weight: bold;
      color: #FEFEFE;
      // box-shadow: inset 0 0 10px #0b8aea;
      // background: rgba(255, 255, 255, 0.05);
      background: url('@/assets/screen/num_bg.png') no-repeat center center;

    }
  }
}

.total-number--decorate {
  position: relative;
  padding-left: 20px;

  &::before {
    position: absolute;
    left: 0px;
    top: 12px;
    content: '';
    width: 12px;
    height: 12px;
    background: #FFFFFF;
    box-shadow: 1px 1px 10px #0b8aea;
  }
}

.total-number--no-bg {
  position: relative;
  padding-left: 20px;

  .number-item-box {
    .number-item {
      background: none;
      box-shadow: none;
      font-family: Giorgio Sans;
      font-weight: normal;
    }
  }

  &::before {
    position: absolute;
    left: 0px;
    top: 12px;
    content: '';
    width: 12px;
    height: 12px;
    background: #FFFFFF;
    box-shadow: 1px 1px 10px #0b8aea;
  }
}

.total-number-horizontal {
  display: flex;
  align-items: baseline;

  .number-title {
    margin-right: 12px;
  }

  .number-item-box {
    margin-top: 0px;
  }
}